<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>
      web前端工程师个人简历
    </title>
    <meta content="赵柯宇的web前端工程师个人简历，前端学习，前端开发" name="description" />
    <meta content="web前端，FE，web前端个人简历，前端开发" name="keywords" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="fragment" content="!" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <script>
      (function() {
        function autoRootFontSize() {
          const width = Math.min(screen.width, document.documentElement.getBoundingClientRect().width);
          document.documentElement.style.fontSize = width > 600 ? '16px' : (width / 750) * 32 + 'px';
        }
        window.addEventListener('resize', autoRootFontSize);
        autoRootFontSize();
      })();
    </script>
  </head>

  <body id="app" style="display: none">
    <!-- header -->
    <header class="header">
      <div class="title-c">
        <div class="title" v-class="isShowNav?'-rotate':''" v-text="header.titleList[pageIndex].title" v-on:click="titleHandler($event,pageIndex)"></div>
        <div class="title-pc" v-text="header.titleList[pageIndex].title" v-show="pageIndex !== 0 && isPc"></div>
      </div>
      <div class="language">
        <div class="-c" v-class="selectedLang==1?'-selectEn':''">
          <span class="-item" v-class="selectedLang == $index?'-selected':''" v-for="item in header.langList" v-text="item" v-on:click="switchLang($index)"></span>
        </div>
      </div>
      <div class="nav" v-class="isShowNav?'show-nav':''">
        <ul class="-list">
          <li v-class="pageIndex === $index?'-cur-index':''" v-for="item in header.titleList">
            <span v-text="item.title" v-on:click="directToPage($index)"></span>
          </li>
        </ul>
      </div>
      <div class="nav-dot">
        <ul>
          <li v-class="pageIndex == $index?'-cur-index':''" class="nav-dot-item" v-for="item in header.titleList">
            <em v-on:click="directToPage($index)">
              <img v-src="item.svg" alt="" />
            </em>
            <span class="-title" v-text="item.title"></span>
          </li>
        </ul>
      </div>
    </header>
    <!-- main -->
    <main id="fullpage">
      <!-- 首页 -->
      <section class="overview">
        <div class="content">
          <div class="info">
            <div class="photo"></div>
            <ul class="-list">
              <li class="-item" v-for="item in overview.infoList" v-text="item"></li>
            </ul>
          </div>
          <div class="des">
            <p class="quote" v-text="overview.quote"></p>
            <div class="des-list">
              <p v-for="item in overview.desList" v-text="item"></p>
            </div>
          </div>
        </div>
      </section>
      <!-- 能力 -->
      <section class="skill">
        <div class="content">
          <div class="skill-circle">
            <ul class="out">
              <li class="item" v-style="item.bg" v-for="item in skill.outCircleList" v-text="item.name"></li>
            </ul>
            <ul class="inner">
              <li class="inner-item" v-style="item.bg" v-for="item in skill.innerCircleList" v-text="item.name"></li>
            </ul>
          </div>
          <div class="des" v-class="isEng?'-des-en':''">
            <p v-for="item in skill.desList" v-text="item"></p>
          </div>
        </div>
      </section>
      <!-- 经历 -->
      <section class="experience">
        <div class="content">
          <div class="slider">
            <div class="slider-container">
              <div class="left">
                <div class="img" v-style="expCur.img"></div>
                <h4 v-text="expCur.title"></h4>
                <p class="-post">"<span v-text="expCur.post"></span>"</p>
              </div>
              <div class="right">
                <p class="-time" v-text="expCur.time"></p>
                <ul class="-list">
                  <li class="exp-item" v-for="item in expCur.contentList" v-text="item"></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="shout-cut">
            <ul>
              <li v-class="$index == selectExpIndex?'-selected':''" v-for="item in exp.expList" v-on:click="switchExp($event,$index)"></li>
            </ul>
          </div>
        </div>
      </section>
      <!-- 作品集 -->
      <section class="work">
        <div class="content">
          <ul class="work-list">
            <li class="work-list-item" v-for="item in works.worksList">
              <div class="-title">
                <a class="-link" v-text="item.title" v-href="item.url"></a>
              </div>
              <p class="-des" v-class="isEng?'-work-des-en':''" v-text="item.des"></p>
              <div class="-qrcode" v-if="item.mini">
                <img class="-img" v-src="item.mini" />
                <p class="-des" v-text="isEng?'(Press in wechat)':'（微信内长按识别）'"></p>
              </div>
              <div class="work-link" v-if="item.url">
                <a class="-img" v-href="item.url" target="_blank"></a>
                <p class="-des" v-if='item.url.indexOf("quickapp")>-1' v-text="isEng?'(Android can jump)':'（安卓浏览器可跳转）'"></p>
              </div>
            </li>
          </ul>
          <div class="more">
            <a href="https://github.com/zhaoky/demos" target="_blank" v-text="works.viewMore"></a>
          </div>
          <div class="switch" v-on:click="switchWork($event)">
            <i class="left" v-style="workIndex===0?{filter:'brightness(70%)'}:{}"></i>
            <i class="right" v-style="workIndex===works.worksList.length-1?{filter:'brightness(70%)'}:{}"></i>
          </div>
        </div>
      </section>
      <!-- 联系我 -->
      <section class="contact">
        <div class="content">
          <div class="words" v-class="isEng?'words-en':'' ">
            <span v-for="item in contact.desList1" v-text="item"></span>
          </div>
          <div class="idea">
            <p v-for="item in contact.desList2" v-text="item"></p>
          </div>
          <!-- <div class="download">
            <div class="title" v-text="contact.download"></div>
            <div class="list">
              <a v-href="item.url" target="_blank" v-for="item in contact.fileList " v-text="item.title">item.title</a>
            </div>
          </div> -->
          <div class="way">
            <a class="way-item" v-for="item in contact.typeList" v-href="item.url" target="_blank">
              <img class="way-item-img" v-src="item.icon" alt="" />
            </a>
          </div>
        </div>
      </section>
    </main>
    <!-- footer -->
    <footer v-show="pageIndex === 4">
      <div class="github">
        <iframe src="https://ghbtns.com/github-btn.html?user=zhaoky&repo=flqin&type=star&count=true&size=small" frameborder="0" scrolling="0"></iframe>
        <iframe src="https://ghbtns.com/github-btn.html?user=zhaoky&repo=flqin&type=fork&count=true&size=small" frameborder="0" scrolling="0"></iframe>
      </div>
      <p v-for="item in footer" v-text="item"></p>
    </footer>
  </body>
</html>
